<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Loading</title>
	<style>
		
	.logo{
		opacity: 0.7;
	}
	.logo:hover{
		opacity: 1;
	}
	.userinfo{
		position: absolute;
		top: 10px;
		right: 15px;
		color: rgba(255,255,255,0.7);
		font-weight: bold;
	}
	.userinfo .p-avatar{
		vertical-align: middle;
		transform: scale(0.7);
	}
	.footer .pi{
		font-size: 26px;
		color: rgba(255, 255, 255, 0.9);
		transition: .3s all;
		margin: auto;
	}
	.pi-cog:hover{
	}
	.e-card {
	  background: transparent;
	  box-shadow: 0px 8px 28px -9px rgba(0,0,0,0.45);
	  position: relative;
	  width: 300px;
	  height: 300px;
	  border-radius: 0px;
	  overflow: hidden;
	}
	.e-card .footer{
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 60px;
		background-color: rgba(255, 255, 255, 0.4);
	}
	.e-card .footer{
		padding-bottom: 12px;
		padding-top: 10px;
	}
	.e-card .footer .flex-item{
		text-align: center;
		height: 46px;
		line-height: 46px;
	}
	.e-card .footer .flex-item:not(:first-child){
		border-left:1px dashed rgba(255, 255, 255, 0.3);
	}
	.wave {
	  position: absolute;
	  width: 1200px;
	  height: 1200px;
	  opacity: 0.6;
	  left: 0;
	  top: 0;
	  margin-left: -120%;
	  margin-top: -30%;
	  background: linear-gradient(744deg,#af40ff,#5b42f3 60%,#00ddeb);
	}
	
	.icon {
	  width: 3em;
	  margin-top: -1em;
	  padding-bottom: 1em;
	}
	
	.infotop {
	  text-align: center;
	  font-size: 20px;
	  position: absolute;
	  top: 4.6em;
	  left: 0;
	  right: 0;
	  color: rgb(255, 255, 255);
	  font-weight: 600;
	}
	
	.name {
	  font-size: 14px;
	  font-weight: 100;
	  position: relative;
	  top: 1em;
	  text-transform: lowercase;
	}
	
	.wave:nth-child(2),
	.wave:nth-child(3) {
	  top: 210px;
	}
	
	.playing .wave {
	  border-radius: 40%;
	  animation: wave 3000ms infinite linear;
	}
	
	.wave {
	  border-radius: 40%;
	  animation: wave 55s infinite linear;
	}
	
	.playing .wave:nth-child(2) {
	  animation-duration: 4000ms;
	}
	
	.wave:nth-child(2) {
	  animation-duration: 50s;
	}
	
	.playing .wave:nth-child(3) {
	  animation-duration: 5000ms;
	}
	
	.wave:nth-child(3) {
	  animation-duration: 45s;
	}
	
	@keyframes wave {
	  0% {
	    transform: rotate(0deg);
	  }
	
	  100% {
	    transform: rotate(360deg);
	  }
	}
	.spiner{
		position: relative;
		-webkit-animation: loading 2s infinite linear;
		animation: loading 2s infinite linear
	}
	@keyframes loading {
		0% {
				opacity: 0.9;
		}
		50% {
				opacity: 0.2;
		}
		100% {
				opacity: 0.9;
		}
	}
	.logo-title{
		margin-top: 6px;
		color: rgba(255,255,255,0.8);
		font-weight: bold;
		font-family: -apple-system;
	}
	</style>
</head>

<body style="margin:0;padding:0">
<div class="e-card playing">
	  <div class="image"></div>
	  
	  <div class="wave"></div>
	  <div class="wave"></div>
	  <div class="wave"></div>
		<div class="infotop spiner">
			<div>
				<img class="logo pointer " src="/src/assets/img/white.png" height="60"/>
			</div>
			<div class="logo-title">
				ZTMesh
			</div>
</body>

</html>